<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索功能组件化</title>
  <link rel="stylesheet" href="css/common.css"/>
  <link rel="stylesheet" href="css/nav-site.css"/>
  <link rel="stylesheet" href="css/search.css"/>
</head>
<body>
<!-- 站点导航开始 -->
<div class="nav-site" id="nav-site">
  <div class="container">
    <ul class="fl">
      <li class="fl"><a href="javascript:" class="nav-site-login">亲，请登录</a></li>
      <li class="fl"><a href="javascript:" class="nav-site-signup link">免费注册</a></li>
      <li class="fl"><a href="#"  class="nav-site-mobile link">手机逛慕淘</a></li>
    </ul>
    <ul class="fr">
      <li class="menu dropdown fl"  data-active="menu">
        <a href="#" class="dropdown-toggle link  transition">我的慕淘<i class="dropdown-arrow icon transition">&#xe609;</i></a>
        <ul class="dropdown-layer dropdown-left">
          <li><a href="#"  class="dropdown-item">已买到的宝贝</a></li>
          <li><a href="#"  class="dropdown-item">我的足迹</a></li>
        </ul>
      </li>
      <li class="menu dropdown fl" data-active="menu">
        <a href="#"  class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition">&#xe609;</i></a>
        <ul class="dropdown-layer dropdown-left">
          <li><a href="#"  class="dropdown-item">收藏的宝贝</a></li>
          <li><a href="#"  class="dropdown-item">收藏的店铺</a></li>
        </ul>
      </li>
      <li class="fl">
        <a href="#"  class="nav-site-category link">商品分类</a>
      </li>
      <li class="menu dropdown fl" data-active="menu" data-load="json/dropdown-seller.json" data-load_menu="nav_site">
        <a href="#"  class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition">&#xe609;</i></a>
        <ul class="dropdown-layer dropdown-left">
          <li class="dropdown-loading"></li> <!-- 模拟延迟加载 -->
          <!--  <li><a href="#"  class="dropdown-item">免费开店</a></li>
               <li><a href="#"  class="dropdown-item">已卖出的宝贝</a></li>
               <li><a href="#"  class="dropdown-item">出售中的宝贝</a></li>
               <li><a href="#"  class="dropdown-item">卖家服务市场</a></li>
               <li><a href="#"  class="dropdown-item">卖家培训中心</a></li>
               <li><a href="#"  class="dropdown-item">体验中心</a></li> -->
        </ul>
      </li>
      <li class="menu dropdown fl nav-site-service" data-active="menu">
        <a href="#"  class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition">&#xe609;</i></a>
        <ul class="dropdown-layer dropdown-left">
          <li><a href="#"  class="dropdown-item">消费者客服</a></li>
          <li><a href="#"  class="dropdown-item">卖家客服</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<!-- 站点导航结束 -->
<!---------------------------- header  start --------------------->
<div class="header" >
  <div class="container">
    <h1 class="fl"><a href="two-搜索功能组件化.html" class="header-logo text-hidden">自学网</a></h1>
    <div id="header-search" class="search fl">
      <form action="https://s.taobao.com/search"  class="search-form">
        <input type="text" name="q" placeholder="灵魂美食一元抢" autocomplete="off" class="search-input-box fl" />
        <input type="submit" value="搜索" class="search-btn btn fl" />
      </form>
      <ul class="search-layer">
<!--        <li class="search-layer-item text-ellipsis">111</li>-->
<!--        <li class="search-layer-item text-ellipsis">111</li>-->
<!--        <li class="search-layer-item text-ellipsis">111</li>-->
      </ul>
    </div>
  </div>
</div>
<!------------------------------ header  end ----------------------------->


<!-- <script src="js/jquery.js"></script> 引用本地jquery.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->
<script>
  window.jQuery || document.write('<script src="js/jquery.js"><\/script>'); //判断是否有jquery库
</script>
<script src="js/transition.js"></script><!-- 当前浏览器支持 transition 的信息-->
<script src="js/showHide.js"></script><!-- 显示隐藏元素 -->
<script src="js/dropdown.js"></script><!-- 显示隐藏下拉框 -->
<script src="js/nav-site.js"></script><!-- 站点导航js调用 -->
<script src="js/search.js"></script><!--search框-->
</body>
</html>